<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星弈 - 创意五子棋</title>
    <style>
        :root {
            --primary-color: #3a3a3c;
            --secondary-color: #5d5d5f;
            --accent-color: #e4a101;
            --light-color: #f5f5f7;
            --dark-color: #1d1d1f;
            --board-color: #e8c887;
            --line-color: #3a3a3c;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: var(--dark-color);
            color: var(--light-color);
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
            opacity: 0;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: var(--opacity); }
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-color);
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(228, 161, 1, 0.3);
        }
        
        .page {
            flex: 1;
            display: none;
            flex-direction: column;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .page.active {
            display: flex;
        }
        
        /* 首页样式 */
        .home-page {
            justify-content: center;
            align-items: center;
        }
        
        .game-title {
            font-size: 4rem;
            margin-bottom: 3rem;
            text-align: center;
            color: var(--light-color);
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            position: relative;
        }
        
        .game-title::after {
            content: '';
            display: block;
            width: 150px;
            height: 4px;
            background: var(--accent-color);
            margin: 1rem auto;
            border-radius: 2px;
        }
        
        .menu-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            width: 100%;
            max-width: 800px;
        }
        
        .menu-card {
            background: rgba(58, 58, 60, 0.7);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
        }
        
        .menu-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.5);
            border-color: var(--accent-color);
        }
        
        .menu-card i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--accent-color);
        }
        
        .menu-card h2 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        .menu-card p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        
        /* 游戏页面样式 */
        .game-container {
            display: flex;
            flex: 1;
            gap: 2rem;
        }
        
        .board-container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .board {
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
            width: 600px;
            height: 600px;
            background-color: var(--board-color);
            border: 12px solid var(--secondary-color);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            position: relative;
        }
        
        .cell {
            border: 1px solid var(--line-color);
            position: relative;
            cursor: pointer;
        }
        
        .cell::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            border-radius: 50%;
            z-index: 1;
        }
        
        .cell.black::before {
            background: radial-gradient(circle at 30% 30%, #666, #000);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        
        .cell.white::before {
            background: radial-gradient(circle at 30% 30%, #fff, #ccc);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        
        .game-info {
            width: 300px;
            background: rgba(58, 58, 60, 0.7);
            border-radius: 16px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
            display: flex;
            flex-direction: column;
        }
        
        .player-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }
        
        .player {
            text-align: center;
            padding: 1rem;
            border-radius: 8px;
            width: 48%;
            transition: all 0.3s ease;
        }
        
        .player.active {
            background: rgba(228, 161, 1, 0.2);
            border: 1px solid var(--accent-color);
        }
        
        .player-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 auto 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
        }
        
        .black-player .player-icon {
            background: radial-gradient(circle at 30% 30%, #666, #000);
            color: white;
        }
        
        .white-player .player-icon {
            background: radial-gradient(circle at 30% 30%, #fff, #ccc);
            color: black;
        }
        
        .game-controls {
            margin-top: auto;
        }
        
        .btn {
            background: var(--accent-color);
            color: var(--dark-color);
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .btn:hover {
            background: #f5b301;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(228, 161, 1, 0.4);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--light-color);
            border: 1px solid var(--light-color);
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
        }
        
        .game-status {
            margin: 1.5rem 0;
            padding: 1rem;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            text-align: center;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 残局页面样式 */
        .puzzle-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .puzzle-info {
            background: rgba(58, 58, 60, 0.7);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .puzzle-difficulty {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .easy {
            background: rgba(76, 175, 80, 0.2);
            color: #4CAF50;
            border: 1px solid #4CAF50;
        }
        
        .medium {
            background: rgba(255, 193, 7, 0.2);
            color: #FFC107;
            border: 1px solid #FFC107;
        }
        
        .hard {
            background: rgba(244, 67, 54, 0.2);
            color: #F44336;
            border: 1px solid #F44336;
        }
        
        .puzzle-nav {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
        }
        
        /* 历史分数页面样式 */
        .scores-container {
            flex: 1;
            background: rgba(58, 58, 60, 0.7);
            border-radius: 16px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow-y: auto;
        }
        
        .score-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .score-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .score-tab {
            padding: 0.5rem 1.5rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .score-tab.active {
            background: var(--accent-color);
            color: var(--dark-color);
            font-weight: 600;
        }
        
        .score-tab:not(.active):hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .score-list {
            display: none;
        }
        
        .score-list.active {
            display: block;
        }
        
        .score-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }
        
        .score-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .score-player {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .score-rank {
            font-weight: 700;
            color: var(--accent-color);
            width: 30px;
            text-align: center;
        }
        
        .score-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--secondary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
        }
        
        .score-value {
            font-weight: 600;
        }
        
        .back-btn {
            position: absolute;
            top: 2rem;
            left: 2rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .back-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-3px);
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }
        
        .modal-content {
            background: var(--primary-color);
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            border: 1px solid var(--accent-color);
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--light-color);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .modal-title {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--accent-color);
        }
        
        .modal-message {
            margin-bottom: 2rem;
            font-size: 1.2rem;
        }
        
        .modal-btn {
            background: var(--accent-color);
            color: var(--dark-color);
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }
        
        .modal-btn:hover {
            background: #f5b301;
            transform: translateY(-2px);
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .game-container {
                flex-direction: column;
            }
            
            .game-info {
                width: 100%;
                margin-top: 2rem;
            }
            
            .board {
                width: 100%;
                max-width: 500px;
                height: 500px;
            }
        }
        
        @media (max-width: 768px) {
            .menu-options {
                grid-template-columns: 1fr;
            }
            
            .game-title {
                font-size: 2.5rem;
            }
            
            .board {
                max-width: 400px;
                height: 400px;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 1rem;
            }
            
            .board {
                max-width: 320px;
                height: 320px;
            }
            
            .player-info {
                flex-direction: column;
            }
            
            .player {
                width: 100%;
                margin-bottom: 1rem;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="stars" id="stars"></div>
    
    <button class="back-btn" id="backBtn" style="display: none;">
        <i class="fas fa-arrow-left"></i>
    </button>
    
    <!-- 获胜弹窗 -->
    <div class="modal" id="winModal">
        <div class="modal-content">
            <button class="modal-close" id="closeModal">&times;</button>
            <h2 class="modal-title" id="modalTitle">恭喜获胜！</h2>
            <p class="modal-message" id="modalMessage">黑方成功连成五子，获得胜利！</p>
            <div>
                <button class="modal-btn" id="playAgainBtn">再来一局</button>
                <button class="modal-btn btn-secondary" id="goHomeBtn">返回首页</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <header>
            <div class="logo">星弈</div>
            <div id="currentTime"></div>
        </header>
        
        <!-- 首页 -->
        <div class="page home-page active" id="homePage">
            <h1 class="game-title">五子连珠</h1>
            <div class="menu-options">
                <div class="menu-card" id="newGameBtn">
                    <i class="fas fa-chess-board"></i>
                    <h2>新对局</h2>
                    <p>开始一场全新的五子棋对战</p>
                </div>
                <div class="menu-card" id="puzzleBtn">
                    <i class="fas fa-puzzle-piece"></i>
                    <h2>残局挑战</h2>
                    <p>挑战精心设计的五子棋残局</p>
                </div>
                <div class="menu-card" id="scoresBtn">
                    <i class="fas fa-trophy"></i>
                    <h2>历史分数</h2>
                    <p>查看你的战绩和排行榜</p>
                </div>
                <div class="menu-card" id="settingsBtn">
                    <i class="fas fa-cog"></i>
                    <h2>设置</h2>
                    <p>调整游戏参数和外观</p>
                </div>
            </div>
        </div>
        
        <!-- 新对局页面 -->
        <div class="page" id="gamePage">
            <div class="game-container">
                <div class="board-container">
                    <div class="board" id="board"></div>
                </div>
                <div class="game-info">
                    <div class="player-info">
                        <div class="player black-player active" id="blackPlayer">
                            <div class="player-icon">黑</div>
                            <h3>黑方</h3>
                            <p>先手</p>
                        </div>
                        <div class="player white-player" id="whitePlayer">
                            <div class="player-icon">白</div>
                            <h3>白方</h3>
                            <p>后手</p>
                        </div>
                    </div>
                    <div class="game-status" id="gameStatus">
                        黑方回合，请落子
                    </div>
                    <div class="game-controls">
                        <button class="btn" id="restartBtn">重新开始</button>
                        <button class="btn btn-secondary" id="homeBtn">返回首页</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 残局页面 -->
        <div class="page" id="puzzlePage">
            <h1 class="game-title">残局挑战</h1>
            <div class="puzzle-container">
                <div class="puzzle-info">
                    <span class="puzzle-difficulty" id="puzzleDifficulty">中等难度</span>
                    <h2 id="puzzleTitle">双活三陷阱</h2>
                    <p id="puzzleDescription">黑方只需一步即可形成双活三，白方如何防守才能避免失败？</p>
                    <p>当前残局: <span id="currentPuzzle">1</span>/<span id="totalPuzzles">5</span></p>
                    <p>剩余尝试次数: <span id="attemptsLeft">3</span></p>
                    
                    <div class="puzzle-nav">
                        <button class="btn btn-secondary" id="prevPuzzleBtn">
                            <i class="fas fa-chevron-left"></i> 上一题
                        </button>
                        <button class="btn" id="nextPuzzleBtn">
                            下一题 <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
                <div class="board-container">
                    <div class="board" id="puzzleBoard"></div>
                </div>
            </div>
        </div>
        
        <!-- 历史分数页面 -->
        <div class="page" id="scoresPage">
            <h1 class="game-title">历史分数</h1>
            <div class="scores-container">
                <div class="score-header">
                    <h2>对战记录</h2>
                    <div>
                        <span>总对局: <strong>24</strong></span>
                        <span style="margin-left: 1rem;">胜率: <strong>75%</strong></span>
                    </div>
                </div>
                
                <div class="score-tabs">
                    <div class="score-tab active" data-tab="all">全部</div>
                    <div class="score-tab" data-tab="wins">胜利</div>
                    <div class="score-tab" data-tab="losses">失败</div>
                    <div class="score-tab" data-tab="puzzles">残局</div>
                </div>
                
                <div class="score-list active" id="allScores">
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">1</div>
                            <div class="score-avatar">你</div>
                            <div>
                                <div>对战AI - 困难</div>
                                <div class="score-date">2023-06-15</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">2</div>
                            <div class="score-avatar">AI</div>
                            <div>
                                <div>残局挑战 #7</div>
                                <div class="score-date">2023-06-14</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #F44336;">失败</div>
                    </div>
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">3</div>
                            <div class="score-avatar">友</div>
                            <div>
                                <div>好友对战 - 张三</div>
                                <div class="score-date">2023-06-12</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">4</div>
                            <div class="score-avatar">AI</div>
                            <div>
                                <div>对战AI - 中等</div>
                                <div class="score-date">2023-06-10</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                </div>
                
                <div class="score-list" id="winScores">
                    <!-- 胜利记录 -->
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">1</div>
                            <div class="score-avatar">你</div>
                            <div>
                                <div>对战AI - 困难</div>
                                <div class="score-date">2023-06-15</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">2</div>
                            <div class="score-avatar">友</div>
                            <div>
                                <div>好友对战 - 张三</div>
                                <div class="score-date">2023-06-12</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                </div>
                
                <div class="score-list" id="lossScores">
                    <!-- 失败记录 -->
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">1</div>
                            <div class="score-avatar">AI</div>
                            <div>
                                <div>残局挑战 #7</div>
                                <div class="score-date">2023-06-14</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #F44336;">失败</div>
                    </div>
                </div>
                
                <div class="score-list" id="puzzleScores">
                    <!-- 残局记录 -->
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">1</div>
                            <div class="score-avatar">AI</div>
                            <div>
                                <div>残局挑战 #7</div>
                                <div class="score-date">2023-06-14</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #F44336;">失败</div>
                    </div>
                    <div class="score-item">
                        <div class="score-player">
                            <div class="score-rank">2</div>
                            <div class="score-avatar">你</div>
                            <div>
                                <div>残局挑战 #6</div>
                                <div class="score-date">2023-06-13</div>
                            </div>
                        </div>
                        <div class="score-value" style="color: #4CAF50;">胜利</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 创建星空背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            starsContainer.innerHTML = '';
            
            const starCount = 100;
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机大小 (1-3px)
                const size = Math.random() * 2 + 1;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                
                // 随机位置
                const left = Math.random() * windowWidth;
                const top = Math.random() * windowHeight;
                star.style.left = `${left}px`;
                star.style.top = `${top}px`;
                
                // 随机闪烁参数
                const duration = Math.random() * 5 + 3;
                const opacity = Math.random() * 0.8 + 0.2;
                star.style.setProperty('--duration', `${duration}s`);
                star.style.setProperty('--opacity', opacity);
                
                starsContainer.appendChild(star);
            }
        }
        
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            document.getElementById('currentTime').textContent = timeString;
        }
        
        // 页面导航
        function navigateTo(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            document.getElementById(pageId).classList.add('active');
            document.getElementById('backBtn').style.display = pageId === 'homePage' ? 'none' : 'block';
        }
        
        // 初始化五子棋棋盘
        function initBoard(boardId, size = 15) {
            const board = document.getElementById(boardId);
            board.innerHTML = '';
            
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    board.appendChild(cell);
                }
            }
            
            return board;
        }
        
        // 显示获胜弹窗
        function showWinModal(winner) {
            const modal = document.getElementById('winModal');
            const modalTitle = document.getElementById('modalTitle');
            const modalMessage = document.getElementById('modalMessage');
            
            modalTitle.textContent = winner === 'black' ? '黑方获胜！' : '白方获胜！';
            modalMessage.textContent = winner === 'black' 
                ? '黑方成功连成五子，获得胜利！' 
                : '白方成功连成五子，获得胜利！';
            
            modal.style.display = 'flex';
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('winModal').style.display = 'none';
        }
        
        // 五子棋游戏逻辑
        class GomokuGame {
            constructor(boardId) {
                this.boardId = boardId;
                this.boardSize = 15;
                this.currentPlayer = 'black';
                this.gameOver = false;
                this.boardState = Array(this.boardSize).fill().map(() => Array(this.boardSize).fill(null));
                this.initGame();
            }
            
            initGame() {
                this.board = initBoard(this.boardId, this.boardSize);
                this.currentPlayer = 'black';
                this.gameOver = false;
                this.boardState = Array(this.boardSize).fill().map(() => Array(this.boardSize).fill(null));
                
                document.getElementById('blackPlayer').classList.add('active');
                document.getElementById('whitePlayer').classList.remove('active');
                document.getElementById('gameStatus').textContent = '黑方回合，请落子';
                
                this.board.querySelectorAll('.cell').forEach(cell => {
                    cell.addEventListener('click', () => this.handleCellClick(cell));
                });
            }
            
            handleCellClick(cell) {
                if (this.gameOver) return;
                
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                
                if (this.boardState[row][col] !== null) return;
                
                this.boardState[row][col] = this.currentPlayer;
                cell.classList.add(this.currentPlayer);
                
                if (this.checkWin(row, col)) {
                    this.gameOver = true;
                    showWinModal(this.currentPlayer);
                    return;
                }
                
                this.switchPlayer();
            }
            
            switchPlayer() {
                this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
                
                document.getElementById('blackPlayer').classList.toggle('active', this.currentPlayer === 'black');
                document.getElementById('whitePlayer').classList.toggle('active', this.currentPlayer === 'white');
                
                const player = this.currentPlayer === 'black' ? '黑方' : '白方';
                document.getElementById('gameStatus').textContent = `${player}回合，请落子`;
            }
            
            checkWin(row, col) {
                const directions = [
                    [ [0, 1], [0, -1] ],   // 水平
                    [ [1, 0], [-1, 0] ],    // 垂直
                    [ [1, 1], [-1, -1] ],   // 主对角线
                    [ [1, -1], [-1, 1] ]    // 副对角线
                ];
                
                for (const [dir1, dir2] of directions) {
                    let count = 1;  // 当前落子已经算1
                    
                    count += this.countInDirection(row, col, dir1[0], dir1[1]);
                    count += this.countInDirection(row, col, dir2[0], dir2[1]);
                    
                    if (count >= 5) return true;
                }
                
                return false;
            }
            
            countInDirection(row, col, deltaRow, deltaCol) {
                const player = this.boardState[row][col];
                let count = 0;
                let r = row + deltaRow;
                let c = col + deltaCol;
                
                while (
                    r >= 0 && r < this.boardSize && 
                    c >= 0 && c < this.boardSize && 
                    this.boardState[r][c] === player
                ) {
                    count++;
                    r += deltaRow;
                    c += deltaCol;
                }
                
                return count;
            }
        }
        
        // 残局数据
        const puzzles = [
            {
                title: "双活三陷阱",
                description: "黑方只需一步即可形成双活三，白方如何防守才能避免失败？",
                difficulty: "medium",
                moves: [
                    {row: 7, col: 7, player: 'black'},
                    {row: 7, col: 8, player: 'white'},
                    {row: 8, col: 8, player: 'black'},
                    {row: 8, col: 9, player: 'white'},
                    {row: 9, col: 9, player: 'black'},
                    {row: 9, col: 10, player: 'white'},
                    {row: 10, col: 10, player: 'black'},
                    {row: 6, col: 6, player: 'white'},
                    {row: 5, col: 5, player: 'black'},
                ],
                solution: {row: 6, col: 10, player: 'white'}
            },
            {
                title: "四三杀招",
                description: "黑方有形成四三的机会，白方如何破解这一杀招？",
                difficulty: "hard",
                moves: [
                    {row: 6, col: 6, player: 'black'},
                    {row: 6, col: 7, player: 'white'},
                    {row: 7, col: 7, player: 'black'},
                    {row: 7, col: 8, player: 'white'},
                    {row: 8, col: 8, player: 'black'},
                    {row: 8, col: 9, player: 'white'},
                    {row: 9, col: 9, player: 'black'},
                    {row: 5, col: 5, player: 'white'},
                    {row: 10, col: 10, player: 'black'},
                    {row: 9, col: 7, player: 'white'},
                    {row: 7, col: 9, player: 'black'},
                ],
                solution: {row: 6, col: 8, player: 'white'}
            },
            {
                title: "简单开局",
                description: "黑方已经形成活三，白方应该如何防守？",
                difficulty: "easy",
                moves: [
                    {row: 7, col: 7, player: 'black'},
                    {row: 7, col: 8, player: 'white'},
                    {row: 8, col: 8, player: 'black'},
                    {row: 8, col: 9, player: 'white'},
                    {row: 9, col: 9, player: 'black'},
                ],
                solution: {row: 9, col: 8, player: 'white'}
            },
            {
                title: "斜线进攻",
                description: "黑方正在形成斜线进攻，白方需要找到最佳防守点",
                difficulty: "medium",
                moves: [
                    {row: 5, col: 5, player: 'black'},
                    {row: 5, col: 6, player: 'white'},
                    {row: 6, col: 6, player: 'black'},
                    {row: 6, col: 7, player: 'white'},
                    {row: 7, col: 7, player: 'black'},
                    {row: 7, col: 8, player: 'white'},
                    {row: 8, col: 8, player: 'black'},
                    {row: 4, col: 4, player: 'white'},
                ],
                solution: {row: 9, col: 9, player: 'white'}
            },
            {
                title: "复杂防守",
                description: "黑方有多个进攻路线，白方需要同时防守多个方向",
                difficulty: "hard",
                moves: [
                    {row: 6, col: 6, player: 'black'},
                    {row: 6, col: 7, player: 'white'},
                    {row: 7, col: 7, player: 'black'},
                    {row: 7, col: 8, player: 'white'},
                    {row: 8, col: 8, player: 'black'},
                    {row: 8, col: 9, player: 'white'},
                    {row: 5, col: 5, player: 'black'},
                    {row: 9, col: 9, player: 'white'},
                    {row: 7, col: 5, player: 'black'},
                    {row: 7, col: 9, player: 'white'},
                    {row: 9, col: 7, player: 'black'},
                ],
                solution: {row: 6, col: 8, player: 'white'}
            }
        ];
        
        // 初始化残局
        let currentPuzzleIndex = 0;
        
        function initPuzzle(index = 0) {
            const puzzle = puzzles[index];
            const board = initBoard('puzzleBoard', 15);
            
            // 更新残局信息
            document.getElementById('puzzleTitle').textContent = puzzle.title;
            document.getElementById('puzzleDescription').textContent = puzzle.description;
            document.getElementById('puzzleDifficulty').className = 'puzzle-difficulty ' + puzzle.difficulty;
            document.getElementById('puzzleDifficulty').textContent = 
                puzzle.difficulty === 'easy' ? '简单难度' : 
                puzzle.difficulty === 'medium' ? '中等难度' : '困难难度';
            document.getElementById('currentPuzzle').textContent = index + 1;
            document.getElementById('totalPuzzles').textContent = puzzles.length;
            document.getElementById('attemptsLeft').textContent = 3;
            
            // 预设棋子位置
            puzzle.moves.forEach(move => {
                const cell = board.querySelector(`.cell[data-row="${move.row}"][data-col="${move.col}"]`);
                if (cell) {
                    cell.classList.add(move.player);
                }
            });
            
            // 添加点击事件
            board.querySelectorAll('.cell').forEach(cell => {
                cell.addEventListener('click', function() {
                    if (this.classList.contains('black') || this.classList.contains('white')) return;
                    
                    const attemptsLeft = parseInt(document.getElementById('attemptsLeft').textContent);
                    if (attemptsLeft <= 0) return;
                    
                    this.classList.add('white');
                    
                    const row = parseInt(this.dataset.row);
                    const col = parseInt(this.dataset.col);
                    
                    if (row === puzzle.solution.row && col === puzzle.solution.col) {
                        showWinModal('white');
                    } else {
                        document.getElementById('attemptsLeft').textContent = attemptsLeft - 1;
                        if (attemptsLeft - 1 <= 0) {
                            showWinModal('black');
                        }
                    }
                });
            });
        }
        
        // 初始化分数标签切换
        function initScoreTabs() {
            const tabs = document.querySelectorAll('.score-tab');
            const lists = document.querySelectorAll('.score-list');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    const tabId = tab.dataset.tab;
                    lists.forEach(list => list.classList.remove('active'));
                    document.getElementById(`${tabId}Scores`).classList.add('active');
                });
            });
        }
        
        // 初始化事件监听
        function initEventListeners() {
            // 导航按钮
            document.getElementById('newGameBtn').addEventListener('click', () => {
                navigateTo('gamePage');
                game = new GomokuGame('board');
            });
            
            document.getElementById('puzzleBtn').addEventListener('click', () => {
                navigateTo('puzzlePage');
                initPuzzle();
            });
            
            document.getElementById('scoresBtn').addEventListener('click', () => {
                navigateTo('scoresPage');
            });
            
            document.getElementById('settingsBtn').addEventListener('click', () => {
                alert('设置功能将在后续版本中添加');
            });
            
            // 返回按钮
            document.getElementById('backBtn').addEventListener('click', () => {
                navigateTo('homePage');
            });
            
            // 游戏页面按钮
            document.getElementById('homeBtn').addEventListener('click', () => {
                navigateTo('homePage');
            });
            
            document.getElementById('restartBtn').addEventListener('click', () => {
                if (game) game.initGame();
            });
            
            // 残局页面按钮
            document.getElementById('prevPuzzleBtn').addEventListener('click', () => {
                currentPuzzleIndex = (currentPuzzleIndex - 1 + puzzles.length) % puzzles.length;
                initPuzzle(currentPuzzleIndex);
            });
            
            document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
                currentPuzzleIndex = (currentPuzzleIndex + 1) % puzzles.length;
                initPuzzle(currentPuzzleIndex);
            });
            
            // 弹窗按钮
            document.getElementById('closeModal').addEventListener('click', closeModal);
            document.getElementById('playAgainBtn').addEventListener('click', () => {
                closeModal();
                if (document.getElementById('puzzlePage').classList.contains('active')) {
                    initPuzzle(currentPuzzleIndex);
                } else if (game) {
                    game.initGame();
                }
            });
            document.getElementById('goHomeBtn').addEventListener('click', () => {
                closeModal();
                navigateTo('homePage');
            });
        }
        
        // 初始化
        let game;
        
        window.addEventListener('load', () => {
            createStars();
            updateTime();
            setInterval(updateTime, 1000);
            initScoreTabs();
            initEventListeners();
            
            // 响应窗口大小变化
            window.addEventListener('resize', createStars);
        });
    </script>
</body>
</html>